<template>
  <!-- 我的钱包 -->
  <view>
    <view class="zican-box">
      <view class="zican-title">总资产折合(USDT)</view>
      <view class="">
        <text class="zican-left">2.2156</text>
        <text class="zican-right">≈0.0002112 BTN</text>
      </view>
    </view>
    <view class="zican-box">
      <view class="zican-title">总资产折合(DT)</view>
      <view class="">
        <text class="zican-left">2.2156</text>
        <text class="zican-right">≈0.0002112 BTN</text>
      </view>
    </view>
    <view class="zican-box">
      <view class="zican-title">总资产折合(FDT)</view>
      <view class="">
        <text class="zican-left">2.2156</text>
        <text class="zican-right">≈0.0002112 BTN</text>
      </view>
    </view>
    <view class="zican-box">
      <view class="zican-title">总资产折合(BU)</view>
      <view class="">
        <text class="zican-left">2.2156</text>
        <text class="zican-right">≈0.0002112 BTN</text>
      </view>
    </view>
    <!-- 账户列表 -->
        <view class="zhanghu-box">
          <view class="zhanghu-lisi">
            <view class="zhanghu-title">消费账户</view>
            <view class="cny-text">0 CNY</view>
            <view class="btc-text">≈ 0 BTC</view>
          </view>
          <view class="zhanghu-lisi">
            <view class="zhanghu-title">保证金账户</view>
            <view class="cny-text">0 CNY</view>
            <view class="btc-text">≈ 0 BTC</view>
          </view>
          <view class="zhanghu-lisi">
            <view class="zhanghu-title">收益账户</view>
            <view class="cny-text">0 CNY</view>
            <view class="btc-text">≈ 0 BTC</view>
          </view>
        </view>
    <!-- 账户列表结束 -->
    <view class="zicande-box">
      <view class="zichan-text">资产明细</view>
      <view class="detail-top">
        <view class="detail-box detail-title">
          <text>VTN</text>
          <text>300000</text>
        </view>
        <view class="detail-box detail-text">
          <text>体现权益：0</text>
          <text>≈ 2.02121 CNY</text>
        </view>
      </view>
    </view>
    <!-- 底部盒子 -->
    <view class="bottom-box">
      <button type="primary" size="mini">购买VTN</button>
      <button type="primary" size="mini">内部转账</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>
    page{
      background-color: #091432;
      color: #bbc5e2;
      padding-bottom: 100rpx;
    }
    .zican-box{
      color: #FFFFFF;
      padding: 40rpx;
      background-color: #121d3b;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }
    .zican-title{
      margin-bottom: 20rpx;
    }
    .zican-left{
      font-size: 42rpx;
    }
    .zican-right{
      color: #6c7999;
      margin-left: 10rpx;
    }
    .bottom-box{
      position: fixed;
      bottom: 40rpx;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .zhanghu-box{
      display: flex;
      justify-content: space-between;
      margin: 10rpx 20rpx;
    }
    .zhanghu-lisi{
      background-color: #121d3b;
      width: 32%;
      height: 200rpx;
      padding: 20rpx;
      border-radius: 10rpx;
    }
    .zhanghu-title{
      color: #b4c2dd;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
    .cny-text{
      font-size: 36rpx;
      color: #FFFFFF;
    }
    .btc-text{
      color: #647191;
    }
    .zicande-box{
      margin: 20rpx;
    }
    .detail-top{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: #121d3b;
      height: 150rpx;
      padding: 10rpx;
      margin-top: 10rpx;
    }
    .detail-box{
      display: flex;
      justify-content: space-between;
    }
    .detail-title{
      font-size: 36rpx;
      color: #FFFFFF;
    }
    .detail-text{
      font-size: 24rpx;
      
    }
</style>
